Dio Cardnews Core 디오 카드뉴스 공통 뼈대

📅 2026-07-07 10:52 · obsidian-share

type: note

status: draft

source_type: authored-note

knowledge-candidate: true

topics:

- cardnews

- mobile-first-ui

- ai-creator-bus

- dio-ai-talktalk

- reusable-template

keywords:

- Dio Cardnews Core

- 디오 카드뉴스 코어

- 카드뉴스 공통 뼈대

- 모바일 최적화 카드뉴스

- 스와이프 스냅

created: 2026-06-29

# Dio Cardnews Core - 디오 카드뉴스 공통 뼈대

한 줄 요약

Dio Cardnews Core는 디오의 카드뉴스를 빠르게 만들고 반복 재사용하기 위한 모바일 우선 카드뉴스 공통 뼈대다.

왜 저장했나

LG AI 톡톡 카드뉴스와 AI Creator Bus 워크플로우 카드뉴스를 만들면서 공통으로 필요한 구조가 생겼다. 앞으로 다른 카드뉴스를 만들 때 매번 새로 설계하지 않고, 검증된 뼈대를 기준으로 시작하기 위해 기록한다.

네이밍

  • 공식 이름: Dio Cardnews Core
  • 한국어 별칭: 디오 카드뉴스 코어
  • 의미: 카드뉴스 디자인, 모바일 UX, 네비게이션, 공유, latest/archive 운영까지 포함하는 공통 제작 코어

    • 핵심 원칙

  • 모바일 우선으로 설계한다.
  • 카드뉴스는 9:16 세로형 경험을 기본으로 한다.
  • 콘텐츠는 카드 밖으로 삐져나가거나 잘려 보이면 안 된다.
  • 긴 콘텐츠는 모바일에서 자연스럽게 늘어나야 한다.
  • 사용자는 스와이프 중심으로 카드를 넘기고, 버튼은 보조 수단으로 둔다.
  • 홈 / 공유 / 이전 / 다음 기능은 공통 UX로 유지한다.
  • latest 페이지와 날짜별 post 페이지를 함께 관리한다.
  • 배포 후 로컬 검증만이 아니라 프로덕션 URL에서 다시 확인한다.

    • 공통 기능

    1. 카드 구조

  • 카드 단위는 .card-shell과 .card로 구성한다.
  • 카드 폭은 모바일 화면 기준으로 자연스럽게 맞춘다.
  • PC에서는 카드뉴스의 세로형 정체성을 유지하되, 화면이 답답하지 않도록 검증한다.

    • 2. 모바일 오버플로우 방지

  • overflow-x: hidden 적용.
  • 긴 URL, 코드, 프롬프트는 overflow-wrap / word-break로 줄바꿈한다.
  • 모바일에서 카드 높이를 무리하게 고정하지 않는다.
  • 내용이 긴 카드는 height: auto + min-height 방식으로 자연스럽게 늘어나게 한다.
  • 장식용 pseudo-element가 문서 가로폭을 밀어내면 모바일에서 숨기거나 폭을 제한한다.

    • 3. 세로 스와이프 자석 정렬

  • 위/아래로 쓸어넘긴 뒤 가장 가까운 카드가 화면에 탁 붙도록 정렬한다.
  • 스크롤이 카드 중간에 애매하게 멈추지 않게 한다.
  • 모바일에서는 snap 강도를 더 체감되게 조정한다.

    • 4. 좌우 스와이프 카드 이동

  • 왼쪽으로 스와이프하면 다음 카드.
  • 오른쪽으로 스와이프하면 이전 카드.
  • 세로 스크롤과 충돌하지 않도록 가로 이동량이 충분히 클 때만 작동하게 한다.
  • 첫 카드/마지막 카드에서는 무리하게 이동하지 않고 작은 안내 토스트를 띄운다.

    • 5. 버튼 정책

  • 홈 버튼은 반드시 유지한다.
  • 공유 버튼은 홈 버튼 옆에 작고 귀여운 아이콘형으로 둔다.
  • 위/아래 화살표 버튼은 유지하되 보조 수단으로 둔다.
  • 모바일에서는 처음 몇 초간 보였다가 자동으로 사라진다.
  • 화면을 터치하거나 마우스를 움직이면 다시 나타난다.

    • 6. 안내 토스트

  • 모바일 진입 시 작게 표시한다.
  • 예시 문구: 📱 모바일에 최적화된 카드뉴스입니다
  • 스와이프 안내 문구도 필요하면 추가한다.
  • 예시 문구: ← → 또는 위아래로 쓸어넘겨 카드를 볼 수 있어요
  • 토스트는 작게 나타났다가 자연스럽게 사라진다.

    • 7. 공유 기능

  • 공유 버튼은 navigator.share를 우선 사용한다.
  • 공유 API가 안 되면 클립보드 복사로 fallback한다.
  • 버튼의 visible text는 길게 쓰지 않는다.
  • 페이지 링크 공유 같은 긴 설명은 화면에 보이지 않게 하고, aria-label에만 둔다.

    • 8. 홈 화면 구조

  • 최신 카드뉴스 CTA를 가장 잘 보이게 둔다.
  • Claude / ChatGPT / Gemini 같은 AI 도구 바로가기 버튼을 둔다.
  • 아카이브는 날짜순으로 확인 가능하게 둔다.
  • 과도한 조회수/좋아요/리트윗 같은 소스 성과 정보는 기본 노출하지 않는다.

    • 현재 적용된 테마

    LG AI 톡톡 카드뉴스

  • 사이트: dio-ai-talktalk-site
  • 배포: https://dio-ai-talktalk.vercel.app/
  • 톤: Life's Good / LG 레드 / 웜화이트 / 업무 적용 중심
  • 주요 페이지:

    • - /

    - /latest/

    - /posts/YYYY-MM-DD/

    AI Creator Bus 워크플로우 카드뉴스

  • 사이트: ai-creator-bus-site
  • 배포: https://ai-creator-bus.vercel.app/
  • 톤: AI 이미지·영상 워크플로우 / 블루 계열 / 실전 제작 중심
  • 주요 페이지:

    • - /

    - /latest/

    - /posts/YYYY-MM-DD/

    제작 체크리스트

    작성 전

  • [ ] 카드뉴스 주제 확정
  • [ ] 카드 장수 확정
  • [ ] 모바일 우선인지 확인
  • [ ] 사용할 테마 선택: LG / Workflow / 신규 테마
  • [ ] 출처 링크 확보

    • 구현 중

  • [ ] dated post 생성
  • [ ] latest 동기화
  • [ ] home archive 업데이트
  • [ ] 홈 / 공유 / 이전 / 다음 버튼 확인
  • [ ] 세로 스와이프 스냅 확인
  • [ ] 좌우 스와이프 이전/다음 확인
  • [ ] 모바일 안내 토스트 확인
  • [ ] 프롬프트 복사 기능 확인
  • [ ] 긴 URL/코드 줄바꿈 확인

    • 검증

  • [ ] 모바일 360×800 검증
  • [ ] 모바일 390×844 검증
  • [ ] 모바일 430×932 검증
  • [ ] PC 1440×900 검증
  • [ ] 콘텐츠 카드 밖 돌출 없음
  • [ ] 가로 스크롤 없음
  • [ ] 카드 번호/페이지 표시 정상
  • [ ] 첫 카드/마지막 카드 예외 처리 정상
  • [ ] 프로덕션 URL에서 재검증

    • AI가 이 노트로 답할 수 있는 질문

  • Dio Cardnews Core가 뭐야?
  • 디오 카드뉴스를 새로 만들 때 어떤 공통 구조를 써야 해?
  • 카드뉴스 모바일 오버플로우를 막는 기준은 뭐야?
  • 카드뉴스에 홈/공유/화살표 버튼은 어떻게 배치해야 해?
  • 좌우 스와이프와 세로 스냅은 어떤 UX 기준으로 넣어야 해?
  • LG AI 톡톡과 AI Creator Bus 카드뉴스의 공통 뼈대는 뭐야?
  • 새 카드뉴스 제작 전 검증 체크리스트는 뭐야?

    • 관련 노트

  • [[Dio Cardnews Core - 디오 카드뉴스 공통 뼈대]]

    • 위키 후보 판단

    knowledge-candidate: true

    이 노트는 단순 작업 기록이 아니라, 앞으로 반복 재사용할 카드뉴스 제작 원칙과 UX 패턴을 담고 있으므로 Wiki Vault로 승격할 가치가 있다. 다만 실제 코드 템플릿과 Hermes Skill까지 정리한 뒤 최종 위키화하는 것이 좋다.

    다음에 정리할 것

  • 실제 코드 템플릿 폴더 만들기
  • 공통 JS/CSS를 분리할지 결정하기
  • Dio Cardnews Core를 Hermes Skill로 저장하기
  • 새 카드뉴스 제작 플로우를 템플릿화하기